<template>
  <page-header-wrapper>
    <a-card>
      <a-table rowKey="id" :columns="columns" :data-source="data" :pagination="pagination">
        <span slot="firstLoanDate" slot-scope="firstLoanDate"> {{ humanizeDate(firstLoanDate) }}</span>
        <span slot="totalLoan" slot-scope="totalLoan"> {{ moneyType(totalLoan) }}</span>
        <span slot="principal" slot-scope="principal"> {{ moneyType(principal) }}</span>
        <span slot="firstLoanMaxNum" slot-scope="firstLoanMaxNum"> {{ moneyType(firstLoanMaxNum) }}</span>
        <span slot="asseApprove" slot-scope="_, record">
          <apprDialog :record="record" @update="getData"></apprDialog>
        </span>
        <span slot="operation" slot-scope="_, record">
          <richTextDialog :record="record" :type="1"></richTextDialog>
        </span>
      </a-table>
    </a-card>
  </page-header-wrapper>
</template>
<script>
import { getProject } from '@/api/common'
import moment from 'moment'
const columns = [
  {
    title: '项目编号',
    dataIndex: 'projectNum',
    key: 'projectNum',
    width: 120
  },
  {
    title: '项目地址',
    dataIndex: 'addr',
    key: 'addr',
    width: 90
  },
  {
    title: '客户名称',
    dataIndex: 'clientName',
    key: 'clientName'
  },
  {
    title: '贷款顾问',
    dataIndex: 'sysUserName',
    key: 'sysUserName'
  },
  {
    title: '总贷款额度',
    dataIndex: 'totalLoan',
    key: 'totalLoan',
    scopedSlots: { customRender: 'totalLoan' }
  },
  {
    title: '实际贷款本金金额',
    dataIndex: 'principal',
    key: 'principal',
    scopedSlots: { customRender: 'principal' }
  },
  {
    title: '审批首次放款最大金额',
    dataIndex: 'firstLoanMaxNum',
    key: 'firstLoanMaxNum',
    scopedSlots: { customRender: 'firstLoanMaxNum' }
  },
  {
    title: '最晚首次放款时间',
    dataIndex: 'firstLoanDate',
    key: 'firstLoanDate',
    scopedSlots: { customRender: 'firstLoanDate' }
  },
  {
    title: 'LVR（%）',
    dataIndex: 'LVR',
    key: 'LVR'
  },
  {
    title: 'IRR（%）',
    dataIndex: 'IRR',
    key: 'IRR'
  },
  {
    title: '审批',
    dataIndex: 'asseApprove',
    key: 'asseApprove',
    scopedSlots: { customRender: 'asseApprove' }
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    scopedSlots: { customRender: 'operation' }
  }
]
export default {
  name: 'Evaluation',
  components: {
    richTextDialog: () => import('./com/RichTextDialog.vue'),
    apprDialog: () => import('./com/apprDialog.vue')
  },
  data() {
    return {
      columns,
      data: [],
      pagination: {
        total: 1,
        pageSize: 10,
        onChange: this.getData
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    toDetail(record) {
      this.$router.push({ name: 'business/detail', query: { id: record.id } })
    },
    humanizeDate(v) {
      if (v) {
        return moment(v * 1000).format('YYYY-MM-DD') || '--'
      } else {
        return '-'
      }
    },
    moneyType(v) {
      return `${v}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    },
    async getData(page = 1) {
      var _form = {
        page,
        limit: this.pagination.pageSize,
        dataType: 2,
        approve: 2,
        asseApprove: 2,
        nzApprove: 1
      }
      const res = await getProject(_form)
      const data = res.result.data
      this.pagination.total = data.total
      this.data = data.list
      this.data.forEach(el => {
        el.totalLoan = el.loanData.totalLoan
        el.principal = el.loanData.principal
        el.firstLoanMaxNum = el.loanData.firstLoanMaxNum
        el.firstLoanDate = el.loanData.firstLoanDate
        el.LVR = el.loanData.LVR
        el.IRR = el.loanData.IRR
      })
    }
  }
}
</script>
<style lang="css" scoped></style>
